<template>
  <div id="advanced-search">
    <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">
      <a-row :gutter="10">
        <a-col :span="20">
          <a-row>
            <a-col :span="8">
              <a-form-item label="内容" v-bind="formItemLayout">
                <a-input v-decorator="['content']" size="small"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="闲置" v-bind="formItemLayout">
                <a-select
                  size="small"
                  :showArrow="true"
                  v-decorator="['isRecycle']"
                  :options="[
                    { key: 1, value: '0', title: '否' },
                    { key: 2, value: '1', title: '是' }
                  ]"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="推荐" v-bind="formItemLayout">
                <a-select
                  size="small"
                  :showArrow="true"
                  v-decorator="['isRecommend']"
                  :options="[
                    { key: 1, value: '0', title: '否' },
                    { key: 2, value: '1', title: '是' }
                  ]"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="贴子鱼缸类型" v-bind="formItemLayout">
                <a-select
                  size="small"
                  :showArrow="true"
                  v-decorator="['fishType']"
                  :options="[
                    { key: 1, value: '0', title: '否' },
                    { key: 2, value: '1', title: '是' }
                  ]"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="鱼缸话题" v-bind="formItemLayout">
                <a-select
                  size="small"
                  :showArrow="true"
                  v-decorator="['topic']"
                  :options="[
                    { key: 1, value: '0', title: '否' },
                    { key: 2, value: '1', title: '是' }
                  ]"
                >
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4" :style="{ textAlign: 'right', marginTop: '8px' }">
          <a-button class="smaller-btn" type="primary" html-type="submit">
            查询
          </a-button>
          <a-button class="smaller-btn" :style="{}" @click="handleReset">
            清空
          </a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18}
};
import {filterInputData} from 'utils/common';
// import moment from 'moment';

export default {
  name: 'searchView',
  components: {},
  data() {
    return {
      // status: status.slice(),
      // employee: [],
      formItemLayout,
      form: this.$form.createForm(this),
      // endOpen: false,
      // statList: [
      //   {
      //   title: "待启用",
      //   value: "0"
      // },
      // {
      //   title: "使用中",
      //   value: "1"
      // },
      // {
      //   title: "结束",
      //   value: "2"
      // }
      // ],
      // typeList: [
      // {
      //   title: "立减券",
      //   value: "1"
      // },
      // {
      //   title: "满减券",
      //   value: "2"
      // }
      // ]
    };
  },
  // props: {
  //   /* employee: {
  //     type: Array,
  //     default: () => []
  //   } */
  // },
  // computed: {
  //   /* planLevel() {
  //     return this.$store.state.dict.PLAN_LEVEL;
  //   },
  //   project() {
  //     return this.$store.state.dict.PROJECT;
  //   } */
  // },
  created() {
    /* 组件复用的原因，不知道会不会出bug，预留reset表单方法 */
    // this.form.resetFields();
  },
  mounted() {
    // this.getEmployee();
    // this.renderSelection();
  },
  // watch: {
  //   /* planLevel(val) {
  //     this.renderSelection('planLevel');
  //   },
  //   project(val) {
  //     this.renderSelection('project');
  //   } */
  // },
  methods: {
    /* getEmployee() {
      this.$post(this.apiURL.getBottomTitle, {})
        .then(r => {
          let data = r.data.data;
          this.employee = data;
          this.renderSelection('employee');
        })
        .catch(err => {
          console.error(err);
        });
    }, */
    /**
     * @desc: 渲染selection
     * @author: youzi
     */
    // renderSelection(name = '') {
    //   // debugger;
    //   try {
    //     if (!name) {
    //       this.formItem.forEach(el => {
    //         if (el.type === 'selection') {
    //           el.options = this[el.decorator];
    //         }
    //       });
    //     } else {
    //       this.formItem.forEach(el => {
    //         if (el.type === 'selection' && el.decorator === name) {
    //           el.options = this[el.decorator];
    //           throw new Error('found');
    //         }
    //       });
    //     }
    //   } catch (error) {}
    // },
    // 时间日期选择相关函数
    // disabledStartDate(startValue) {
    //   const endValue = this.form.getFieldValue('planCompletionTimeEnd');
    //   if (!startValue || !endValue) {
    //     return false;
    //   }
    //   return startValue.valueOf() > endValue.valueOf();
    // },
    // disabledEndDate(endValue) {
    //   const startValue = this.form.getFieldValue('planCompletionTimeStart');
    //   if (!endValue || !startValue) {
    //     return false;
    //   }
    //   return startValue.valueOf() >= endValue.valueOf();
    // },
    // handleStartOpenChange(open) {
    //   if (!open) {
    //     this.endOpen = true;
    //   }
    // },
    // handleEndOpenChange(open) {
    //   this.endOpen = open;
    // },
    /**
     * @desc: 查询函数，触发父组件的查询方法
     * @param {event} e 事件参数
     * @author: youzi
     */
    handleSearch(e) {
      if (e) {
        e.preventDefault();
      }
      this.form.validateFields((error, values) => {
        // 用户输入的数据先做校验再传给后端
        if (error) {
          return;
        }
        let tmpObj = {};
        Object.keys(values).forEach(key => {
          if (filterInputData(values[key])) {
            if (typeof values[key] === 'string') {
              tmpObj[key] = values[key].trim();
            } else {
              tmpObj[key] = values[key];
            }
            // 对时间格式特殊化处理
            if (key.includes('Time')) {
              tmpObj[key] = values[key].format('YYYY-MM-DD');
            }
          }
        });
        this.$emit('search', tmpObj);
      });
    },
    /**
     * @desc: 导出函数，触发父组件的导出函数
     * @author: youzi
     */
    // exportFile() {
    //   this.form.validateFields((error, values) => {
    //     if (error) {
    //       return;
    //     }
    //     let tmpObj = {};
    //     Object.keys(values).forEach(key => {
    //       if (filterInputData(values[key])) {
    //         if (typeof values[key] === 'string') {
    //           tmpObj[key] = values[key].trim();
    //         } else {
    //           tmpObj[key] = values[key];
    //         }
    //         // 对时间格式特殊化处理
    //         if (key.includes('Time')) {
    //           tmpObj[key] = values[key].format('YYYY-MM-DD');
    //         }
    //       }
    //     });
    //     this.$emit('exportFile', tmpObj);
    //   });
    // },
    /**
     * @desc: 重置表单
     * @author: youzi
     */
    handleReset() {
      this.form.resetFields();
      this.handleSearch();
      this.$message.success('已清空表单！');
    }
  }
};
</script>
<style lang="less">
.ant-calendar {
  .ant-calendar-ok-btn {
    color: #fff !important;
  }

  .ant-calendar-ok-btn-disabled {
    color: #1890ff !important;
  }
}

.ant-advanced-search-form {
  /* background: #fbfbfb; */
  /* border: 1px solid #d9d9d9; */
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
  margin-bottom: 0 !important;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#advanced-search .ant-form {
  max-width: none;
}

#advanced-search {
  @height: 24px;
}
</style>
